import { defineComponent, ref } from 'vue';
/* hooks */
import { useDialog } from '@hooks/useDialog';
/* scss */
import '@src/modules/intelligentQuality/views/components/renameDialog/index.scss';

export default defineComponent({
  name: 'renameDialog',
  emits: ['confirm', 'updateModalValue'],
  setup(props, { emit, expose }) {
    const { visible, showDialog, hideDialog } = useDialog();
    const formRef = ref<HTMLDivElement | null>(null);
    const renameFormData = ref({
      id: '',
      name: '',
    });

    /**
     * @descript 弹窗相关属性
     */
    const getModalAttrs = () => {
      return {
        props: {
          class: 'create-rename-modal',
          width: '500px',
          title: '重命名',
          show: visible.value,
          appendToBody: true,
        },
        on: {
          'update:show': (value: boolean) => {
            visible.value = value;
            emit('updateModalValue', value);
          },
        },
      };
    };

    /**
     * @description 清空弹窗
     */
    const clearDialog = () => {
      hideDialog();
      renameFormData.value = {
        name: '',
      };
    };

    /**
     * @description 保存
     */
    const handleConfirm = () => {
      emit('confirm', renameFormData.value);
      hideDialog();
    };

    expose({
      showDialog,
      clearDialog,
      renameFormData,
    });

    return {
      formRef,
      renameFormData,
      getModalAttrs,
      clearDialog,
      handleConfirm,
    };
  },
  render() {
    return (
      <base-modal {...this.getModalAttrs()} onCancel={() => this.clearDialog()}>
        <div class="rename-dialog">
          <el-form
            ref={el => (this.formRef = el)}
            {...{
              props: {
                model: this.renameFormData,
              },
            }}
          >
            <el-form-item prop="name">
              <el-input value={this.renameFormData.name} onInput={e => (this.renameFormData.name = e)} maxlength={50} autofocus={true} />
            </el-form-item>
          </el-form>
        </div>
        <div slot={'footer'}>
          <el-button type={'plain-third'} onClick={() => this.clearDialog()}>
            取消
          </el-button>
          <el-button type={'primary'} onClick={() => this.handleConfirm()}>
            保存
          </el-button>
        </div>
      </base-modal>
    );
  },
});
